<template>
  <div class="container">
    <form @submit="formSubmit">
      <div class="section flex">
        <span class="section_title">日程标题:</span>
        <input
          class="flex-item section_body"
          name="title"
          type="text"
          placeholder="请输入标题"
          placeholder-style="color:rgba(153, 153, 153, 1);font-size: 28rpx;"
        >
      </div>
      <div class="section flex">
        <span class="section_title">日期类型:</span>
        <radio-group class="flex-item section_body radio" name="type">
          <label @tap="typechange(1)">
            <radio value="1" color="#ff4444" checked/>一次
          </label>
          <label @tap="typechange(2)">
            <radio value="2" color="#ff4444"/>每月
          </label>
          <label @tap="typechange(3)">
            <radio value="3" color="#ff4444"/>每年
          </label>
        </radio-group>
      </div>
      <div class="section flex">
        <span class="section_title">日程日期 :</span>
        <picker class="flex-item section_body" mode="date" :value="date" @change="dateChange">
          <view class="picker">{{date}}</view>
        </picker>
      </div>
      <div class="section flex">
        <span class="section_title">添加备注:</span>
        <input
          class="flex-item section_body"
          name="remark"
          type="text"
          placeholder="选填"
          placeholder-style="color:rgba(153, 153, 153, 1);font-size: 28rpx;"
        >
      </div>
      <button class="submit" form-type="submit" :disabled="disabled">提交</button>
    </form>
  </div>
</template>
<script>
import wx from 'wx'
import api from '@/utils/api'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      guest_id: '',
      type: 1,
      year: '',
      month: '',
      day: '',
      disabled: false
    }
  },
  async onLoad () {
    // 接收客户id
    this.guest_id = this.$route.query.id
  },
  methods: {
    typechange (type) {
      this.type = type
    },
    dateChange (e) {
      const that = this
      const date = e.mp.detail.value
      const arr = date.split('-')
      that.year = arr[0]
      that.month = arr[1]
      that.day = arr[2]
    },
    async formSubmit (e) {
      /* eslint-disable */
      const that = this
      const postInfo = e.mp.detail.value
      if (postInfo.title === '') {
        Toast('标题不为空', 'noicon')
        return false
      }
      if (that.year === '') {
        Toast('请选择日期', 'noicon')
        return false
      }
      that.disabled = true
      postInfo['guestid'] = that.guest_id
      postInfo['year'] = that.year
      postInfo['month'] = that.month
      postInfo['day'] = that.day
      const res = await api.postaddguestspecialdate({
        post_info: JSON.stringify(postInfo)
      })
      if (res.code === '100') {
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        that.disabled = false
        wx.navigateBack({
          success: function () {
            prevPage.onReady()
          }
        })
      }
      Toast(res.msg, 'noicon')
    }
  },
  computed: {
    date () {
      const that = this
      let str = ''
      if (that.year === '') {
        return '点击选择日期'
      }
      switch (that.type) {
        case 1:
          str = that.year + '年' + that.month + '月' + that.day + '日'
          break;
        case 2:
          str = '每月' + that.day + '日'
          break;
        case 3:
          str = '每年' + that.month + '月' + that.day + '每日'
          break;
        default:
          break;
      }
      return str
    }
  }
}
</script>
<style scoped>
.container {
  background-color: #fff;
}
form {
  width: 100%;
  padding-left: 26rpx;
}
.section {
  height: 78rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.section:last-of-type {
  border-bottom: none;
}
.section_title {
  margin-right: 20rpx;
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
}
.section_body {
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
}
.submit {
  width: 272rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #f44444;
  color: #fff;
  font-size: 36rpx;
  border-radius: 52rpx;
  margin: 60rpx auto 40rpx;
}
.radio {
  display: flex;
}
.radio label {
  display: flex;
  align-items: center;
  margin-right: 16rpx;
}
</style>

